﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>基于 有间工作室 用户充值页面</title>

	<link rel="stylesheet" type="text/css" href="/static/pay_info/css/amazeui.min.css" />
	<link rel="stylesheet" type="text/css" href="/static/pay_info/css/main.css" />
	<!-- <script type="text/javascript" src="/static/index/js/pay_info.js"></script> -->
</head>
<body>
	<div class="pay">
		<!--主内容开始编辑-->
		<div class="tr_recharge">
			<div class="tr_rechtext">
				<p class="te_retit"><img src="/static/pay_info/images/coin.png" alt="" />VIP充值中心</p>
				<p>1.积分是有间工作室推出的虚拟货币，你可以使用积分购买站内的虚拟产品。10元=1个月VIP</p>
				<p>2.从2019-6-23到2019-11-11，每充值一个月的VIP送50积分</p>
				<p>3.VIP用户每天签到积分翻倍</p>
			</div>
			<form action="/user/pay_ment" class="am-form" id="doc-vld-msg">
				<div class="tr_rechbox">
					<div class="tr_rechhead">
						<img src="{{ user.avatar_url }}" />
						<p>充值用户：
							<a>{{ user.nick_name }}</a>
						</p>
						<div class="tr_rechheadcion">
							<img src="/static/pay_info/images/coin.png" alt="" />
							<span>当前积分：<span>{{ user.integral }}积分</span></span>
						</div>
					</div>
					<div class="tr_rechli am-form-group">
						<ul class="ui-choose am-form-group" id="uc_01">
							<li>
								<label class="am-radio-inline">
									<input type="radio" name="docVlGender" value="10" required
										data-validation-message="请选择一项充值额度"> 10￥
								</label>
							</li>
{#							<li>#}
{#								<label class="am-radio-inline">#}
{#									<input type="radio" name="docVlGender" value="20"#}
{#										data-validation-message="请选择一项充值额度"> 20￥#}
{#								</label>#}
{#							</li>#}

{#							<li>#}
{#								<label class="am-radio-inline">#}
{#									<input type="radio" name="docVlGender" value="50"#}
{#										ata-validation-message="请选择一项充值额度"> 50￥#}
{#								</label>#}
{#							</li>#}
{#							<li>#}
{#								<label class="am-radio-inline">#}
{#									<input type="radio" name="docVlGender" data-validation-message="请选择一项充值额度"> 其他金额#}
{#								</label>#}
{#							</li>#}
						</ul>
						<!--<span>1币=1元 10元起充</span>-->
					</div>
					<div class="tr_rechoth am-form-group">
						<span>其他金额：</span>
						<input type="number" min="10" max="10000" value="10" class="othbox price"
							data-validation-message="充值金额范围：10-10000元" />
						<!--<p>充值金额范围：10-10000元</p>-->
					</div>
					<div class="tr_rechcho am-form-group">
						<span>充值方式：</span>
{#						<label class="am-radio">#}
{#							<input type="radio" name="radio1" value="weixin" data-am-ucheck required#}
{#								data-validation-message="请选择一种充值方式"><img src="/static/pay_info/images/wechatpay.png">#}
{#						</label>#}
						<label class="am-radio" style="margin-right:30px;">
							<input type="radio" name="radio1" class="fangshi" value="zhifubao" data-am-ucheck
								data-validation-message="请选择一种充值方式"><img src="/static/pay_info/images/zfbpay.png">
						</label>
					</div>

					<div class="tr_rechnum">

						<span>应付金额：</span>
						<p class="rechnum">0.00元</p>


					</div>
				</div>
				<div class="tr_paybox">
					<input type="submit" value="确认下单" id="pay" class="tr_pay am-btn" />
					<span>温馨提示：积分只限于在有间工作室中使用，遇到问题请联系管理员</span>
				</div>
			</form>
		</div>
	</div>

	<script type="text/javascript" src="/static/pay_info/js/jquery.min.js"></script>
	<script type="text/javascript" src="/static/pay_info/js/amazeui.min.js"></script>
	<script type="text/javascript" src="/static/pay_info/js/ui-choose.js"></script>
	<script type="text/javascript">
		// 将所有.ui-choose实例化
		$('.ui-choose').ui_choose();
		// uc_01 ul 单选
		var uc_01 = $('#uc_01').data('ui-choose'); // 取回已实例化的对象
		uc_01.click = function (index, item) {
			console.log('click', index, item.text())
		}
		uc_01.change = function (index, item) {
			console.log('change', index, item.text())
		}
		$(function () {
			$('#uc_01 li:eq(3)').click(function () {
				$('.tr_rechoth').show();
				$('.tr_rechoth').find("input").attr('required', 'true')
				$('.rechnum').text('10.00元');
			})
			$('#uc_01 li:eq(0)').click(function () {
				$('.tr_rechoth').hide();
				$('.rechnum').text('10.00元');
				$('.othbox').val('');


			})
			$('#uc_01 li:eq(1)').click(function () {
				$('.tr_rechoth').hide();
				$('.rechnum').text('20.00元');
				$('.othbox').val('');


			})
			$('#uc_01 li:eq(2)').click(function () {
				$('.tr_rechoth').hide();
				$('.rechnum').text('50.00元');
				$('.othbox').val('');


			})
			$(document).ready(function () {
				$('.othbox').on('input propertychange', function () {
					var num = $(this).val();
					$('.rechnum').html(num + ".00元");



				});
			});
		})

		$(function () {
			$('#doc-vld-msg').validator({
				onValid: function (validity) {
					$(validity.field).closest('.am-form-group').find('.am-alert').hide();
				},
				onInValid: function (validity) {
					var $field = $(validity.field);
					var $group = $field.closest('.am-form-group');
					var $alert = $group.find('.am-alert');
					// 使用自定义的提示信息 或 插件内置的提示信息
					var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

					if (!$alert.length) {
						$alert = $('<div class="am-alert am-alert-danger"></div>').hide().
							appendTo($group);
					}
					$alert.html(msg).show();
				}
			});
		});
	</script>
	{#<div style="text-align:center;">#}
	{#<p>更多源码：<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>#}
	{#</div>#}
</body>

</html>